<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="js/layui/css/layui.css" media="all" rel="stylesheet">
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <script src="js/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script charset="utf-8" src="js/layui/layui.js"></script>
    <script src="../js/template-web.js"></script>
</head>
<body>
<div class="body">
    <div class="layui-row" style="width: 95%; margin: 0 auto;">
        <form class="layui-form">
            <div>
                <div class="layui-form"
                     style="margin: 0 auto;max-width: 900px;padding-top: 50px;padding-left: 301px;background-color: #FFFFFF;">
                    <div class="layui-inline" style="position: relative;left: -100px;top: -30px">
                        <label class="layui-form-label">类别筛选：</label>
                        <div class="layui-input-inline">
                            <select id="selectOnekindID" lay-filter="selectTesttwe"></select>
                        </div>
                    </div>
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-col-md3" style="padding:0 10px;">
                    <div class="layui-card">
                        <div class="layui-card-header layui-colla-title">选择规格（单选）</div>
                        <div class="layui-card-body">
                            <ul id="goods_specs" lay-filter="goods_specs">
                                <!--                                <li><input type="radio" lay-filter="goods_specs_id" name="specs_id" value="1" title="颜色"/></li>-->
                                <!--                                <li><input type="radio" lay-filter="goods_specs_id" name="specs_id" value="2" title="尺码"/></li>-->
                                <!--                                <li><input type="radio" lay-filter="goods_specs_id" name="specs_id" value="3" title="款式"/></li>-->
                                <!--								<li><input type="radio" lay-filter="goods_specs_id" name="specs_id" value="4" title="运存"/></li>-->
                                <!--								<li><input type="radio" lay-filter="goods_specs_id" name="specs_id" value="5" title="内存"/></li>-->
                            </ul>
                        </div>
                    </div>
                    <!--                    <div class="layui-card">-->
                    <!--                        <div class="layui-row">-->
                    <!--                            <input type="text" class="layui-input" id="specsName" name="specs_name" placeholder="请输入规格名称">-->
                    <!--                        </div>-->
                    <!--                    </div>-->

                </div>
                <div class="layui-col-md9" style="padding:0 10px;">
                    <div class="layui-card">
                        <div class="layui-card-header layui-colla-title">选择规格值（可多选）</div>
                        <div class="layui-card-body">
                            <div class="layui-btn-container tag" id="addSpecsValueTag" lay-allowclose="true"
                                 lay-filter="addSpecsValueTag" lay-newTag="true">
                                <!-- 异步获取规格值 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="js/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script charset="utf-8" src="js/layui/layui.js"></script>
<!-- <script src="js/specsValue.js" charset="utf-8"></script> -->
<script>
    layui.config({
        base: "./js/",
        version: true
    }).extend({
        tag: 'tag/tag',
    });

    layui.use(['form', 'jquery', 'layer', 'tag'], function () {
        var $ = layui.jquery,
            form = layui.form,
            tag = layui.tag,
            layer = layui.layer;
        // 添加规格
        $("#specsName").blur(function () {
            var specs_name = this.value;
            var node = this;
            if (specs_name == '') {
                return false;
            }
            $.post('{:url("specs/save")}', {name: specs_name}, function (res) {
                $('#specsName').val('');
                console.log(res);
                if (res.status == 1) {
                    $('#goods_specs').append('<li><input type="radio" lay-filter="goods_specs_id" name="specs_id" value="' + res.result.id + '" title="' + res.result.name + '"/></li>');
                }
                form.render();
            });
        })
        // 选择规格获取规格值 -- 如果异步获取数据
        form.on('radio(goods_specs_id)', function (data) {
            // console.log(data.value); //被点击的radio的value值
            var k_id = $("#selectOnekindID").val()
            var spece={
                "name":data.value,
                "kindId":k_id
            }
            $.ajax({
                url: '/specs/getList',
                type: "POST",
                contentType : "application/json",
                data: JSON.stringify(spece),
                success(res) {
                    console.log(res)
                    var html = '';
                    $('#addSpecsValueTag').html('');
                    $.each(res.data, function (i, v) {
                        $('[lay-filter="addSpecsValueTag"]').append('<button lay-text="' + v.specsValue + '" lay-id="' + v.id + '" type="button" class="tag-item">' + v.specsValue + '</button>');
                    });
                    tag.render("addSpecsValueTag");
                }
            })
        });
        // // 添加规格值
        // tag.on('add(addSpecsValueTag)', function(data){
        //     var specsId = $("input[type='radio']:checked").val();
        //     if (!specsId) {
        //         layer.alert('请选择规格', {icon: 5});
        //         return false;
        //     }
        //     $.ajax({
        //         url:'{:url("specsValue/save")}',
        //         data: {specs_id: specsId, name: data.value},
        //         type: "POST",
        //         success(res){
        //             console.log(res);
        //             $(this).attr('lay-id', res.result.id);
        //         }
        //     });
        // });

        // 获取数据
        window.getSpecsData = function () {
            var specs_value = [];
            var specsId = $("input[type='radio']:checked").val();
            var specsName = $("input[type='radio']:checked").attr('title');
            var allSpecsValueTag = $('#addSpecsValueTag').find("button")//找到 addSpecsValueTag 下面的所有 button
            for (var a = 0; a < allSpecsValueTag.length - 1; a++) {
                specs_value.push({
                    id: allSpecsValueTag.eq(a).attr('lay-id'),
                    name: allSpecsValueTag.eq(a).attr('lay-text')
                })
            }
            ;
            var specsData = {id: specsId, name: specsName, propValueList: specs_value};
            return specsData;
        }

    });
</script>
<script id="forword1" type="text/template">
    <option></option>
    {{each datebate1 value}}
    {{if value.upname==null||value.upname==""}}
    <option value={{@value.id}}>{{@value.name}}</option>
    {{else}}
    <option value={{@value.id}}>{{@value.upname}}/{{@value.name}}</option>
    {{/if}}
    {{/each}}
</script>
<script id="radioTemplate" type="text/template">
    {{each datebate2 value}}
    <li><input type="radio" lay-filter="goods_specs_id" name="name" value="{{value.name}}" title="{{value.name}}"/></li>
    {{/each}}
</script>
<script>
    layui.use(['form'], function () {
        var form = layui.form;

        function az() {
            //加载类别
            $.get("/kind/getList", function (result) {
                date = {datebate1: result.data}
                mera = template("forword1", date);
                $("#selectOnekindID").append(mera);
                form.render('select');
            })
        }

        az();
        form.on('select(selectTesttwe)', function (data) {
            $.get("/specs/byid", {"kindId": data.value}, function (result) {
                date = {datebate2: result.data}
                mera = template("radioTemplate", date);
                $("#goods_specs").append(mera);
                form.render();
            })
        })
    })
</script>
</body>
</html>